/**
 * Created by suweiming on 2017/12/30.
 */
import React from 'react';
import {StyleSheet} from 'react-native';
import {Form} from '../css/form';
import {get, post, formatTime, Feather, domain, Icon, setFormData} from '../lib/http';
import {
    Container,
    Header,
    Button,
    Body,
    Left,
    Right,
    Text,
    validateForm,
    getMergeFormData,
    fnFail,
    fnSuccess,
    Content,
    Fom, Loading
} from '../lib/components';
/**
 * 驾驶司机
 */
export default class Store extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: [], loading: true,};
    }

    componentDidMount() {
        const self = this;
        var form = [
            {label: '姓名', name: 'name', required: true, formItemType: 'inline'},
            {label: '手机号', name: 'phone', formItemType: 'inline'},
            {label: '提醒日期', name: 'validTime', type: 'date'},
            {label: '地址', name: 'address', formItemType: 'inline'},
            {label: '备注', name: 'remark', formItemType: 'inline'}
        ];
        if (this.props.navigation.state.params) {
            var id = this.props.navigation.state.params.id;
            get('/wx/driver/detail/' + id)
                .then(res => {
                    console.log(res);
                    form = setFormData(form, res.data);
                    self.setState({data: form, id: id, loading: false});
                })
        } else {
            self.setState({data: form, loading: false});
        }
    }

    render() {
        const self = this;
        let {data} = this.state;
        if (self.state.loading) {
            return <Loading/>
        }
        let submiting = false;
        return <Container>
            <Header style={CSS.header}>
                <Left>
                    <Feather
                        style={CSS.headerIcon}
                        name="chevron-left"
                        size={24}
                        onPress={() => this.props.navigation.navigate('Driver')}
                    />
                </Left>
                <Body>
                <Text style={CSS.headerText}>{self.state.id ? '修改' : '新增'}</Text>
                </Body>
                <Right>
                    <Text
                        onPress={(e) => {
                            if (submiting) {
                                return fnFail('登录中...');
                            } else {
                                submiting = true;
                            }
                            var formData = self.refs.fom.state;
                            var form = self.state.data;
                            if (validateForm(form, getMergeFormData(form, formData))) { // 验证通过
                                if (self.state.id) {
                                    formData.id = self.state.id;
                                }
                                post('/wx/driver/upsert', formData)
                                    .then(res => {
                                        submiting = false;
                                        if (res.code == 0) {
                                            self.props.navigation.navigate('Driver')
                                            fnSuccess('保存成功');
                                        } else {
                                            fnFail('保存失败！');
                                        }
                                    })
                            }

                        }}
                    >
                        保存
                    </Text>
                </Right>
            </Header>
            <Content>
                <Fom ref="fom" data={data}></Fom>
            </Content>
        </Container>
    }
};

const CSS = StyleSheet.create({
    header: {paddingTop: 30, borderBottomWidth: StyleSheet.hairlineWidth,},
    headerText: {fontSize: 20},
    headerIcon: {alignItems: 'flex-start', flex: 1},
    btn: {marginTop: 20}
});
